import React, { Component } from 'react'

import "./ClassifyList.css";
import { Menu, Dropdown,Input,Button,Table} from 'antd';
import { DownOutlined,PlusOutlined, DeleteOutlined,
  PlusCircleOutlined} from '@ant-design/icons';

  const columns = [
    {
      key:"Id",
      title: 'Id',
      dataIndex: 'Id',
      align: 'center'
    },
    {
      key:"articleTitle",
      title: '排序',
      dataIndex: 'articleTitle',
      align: 'center'
    },
    {
      key:"articleType",
      title: '分类名',
      dataIndex: 'articleType',
      align: 'center'
    },
    {
      key:"articleAuthor",
      title: '操作',
      dataIndex: 'articleAuthor',
      align: 'center'
    },
  ];
  
  const data = [{
    Id: 1,
    "articleTitle": '1',
    "articleType": "新闻",
    "articleAuthor": '删除',
  },
  {
    Id: 2,
    "articleTitle": '2',
    "articleType": "文章",
    "articleAuthor": '删除',
    
  }];
const menu = (
  <Menu>
    <Menu.Item key="0">
      <span  style={{backgroundColor:"#2fb9d4",color:"#ffff"}}>顶级分类</span>
    </Menu.Item>
    <Menu.Item key="1">
      新闻
    </Menu.Item>
    <Menu.Item key="3">
      --新闻子类1
      </Menu.Item>
      <Menu.Item key="4">
      --新闻子类2
      </Menu.Item>
      <Menu.Item key="5">
      产品
      </Menu.Item>
      <Menu.Item key="6">
      --产品子类1
      </Menu.Item>
      <Menu.Item key="7">
      --产品子类2
      </Menu.Item>
  </Menu>
  
);
export default class ClassifyList extends Component {

  render() {
    return (
      <div className="top">
        <div className="top2">
          <div className="top1">
            所属分类
            </div>
          <div className="top5">
          <Dropdown overlay={menu} trigger={['click']}>
    <span className="ant-dropdown-link" onClick={e => e.preventDefault()} style={{color:"black"}}>
      顶级分类<DownOutlined />
    </span>
       </Dropdown>
          </div>
          <div className="top3">
          <Input placeholder="分类名"/>
          </div>
          <div className="top4">
          <Button type="primary" icon={<PlusOutlined />}>
            增加
         </Button>
    </div>
        </div>
        <div>
        <div className="btnBox">
          <div className="btnBoxSelect">
            <Button
              className="deleteBtn"
              type="default"
              icon={<DeleteOutlined />}
            >
              批量删除
            </Button>
            <Button
              className="addBtn"
              type="default"
              icon={<PlusCircleOutlined />}
            >
              添加
            </Button>
          </div>
          <div className="numTotal">
            <span>共有数据：</span>
            <span className="numTotal-num">66</span>
            <span>条</span>
          </div>
        </div>
      </div>
      <div className="tableCon">
          <Table
            rowSelection={{
              type: "checkbox",
              onChange: (selectedRowKeys, selectedRows) => {
                console.log(
                  `selectedRowKeys: ${selectedRowKeys}`,
                  "selectedRows: ",
                  selectedRows
                );
              }
            }}
            bordered
            columns={columns}
            dataSource={data}
          />
        </div>
      </div>
    );
  }
}